<template>
    <div>
        <Row :gutter="16">
            <Col span="24">
                <table-select-common class="pandx"
                    ref="tableSelect" v-model="selectedSchemes" :columns="columns" :items="items"
                    :total-count="totalCount" placeholder="在流程模板名称、流程模板描述中搜索" @on-change="getPage" :tag-show="true"
                    display-property="schemeName"
                    :page-size="pageSize" :optional="optional"
                    tag-color="success" :multi-select="false" @on-dblclick="dblClick" :loading="$store.state.flowScheme.loading">
                </table-select-common>
            </Col>
        </Row>
        <flow-scheme-modal v-if="flowSchemeModalMount" v-model="flowSchemeModalShow"
                           :modal-data="flowSchemeModalData"></flow-scheme-modal>
    </div>
</template>

<script lang="ts">
import {Component, Vue, Prop, Watch, Emit} from 'vue-property-decorator';
import AbpBase from '@/lib/abpbase';
import TableSelectCommon from '@/components/select/table-select-common.vue';
import FlowSchemeModal from '@/components/common-modal/flow-scheme-modal.vue';

@Component({
    components: {TableSelectCommon, FlowSchemeModal},
})
export default class FlowSchemeSelect extends AbpBase {
    name: string = 'FlowSchemeSelect';


    @Prop({type: Array, default: () => []}) value: any[];

    selectedSchemes: any[] = [];
    pageSize: number = 10;


    optional:any[]=[{key:'startTime',value:'1900-01-01 00:00:00'},{key:'endTime',value:'2099-12-31 23:59:59'}];
    flowSchemeModalMount: boolean = false;
    flowSchemeModalShow: boolean = false;
    flowSchemeModalData: any = {};

    columns = [

        {
            title: '流程模板名称',
            key: 'schemeName',

            width: 350,

            align: 'center',

        },

        {
            title: '流程模板描述',
            key: 'description',
            align: 'center',
            minWidth: 300,
        },
        {
            title: '操作',
            width: 110,
            render: (h, params) => {
                return h('Button', {
                    attrs: {},
                    props: {
                        size: 'small',
                        type: 'info',
                        icon: 'md-eye',
                    },
                    on: {
                        click: () => {
                            this.display(params.row);
                        },
                    },
                }, '预览');
            },
            align: 'center',
        },
    ];

    @Watch('selectedSchemes')
    selectedSchemesChange(newVal) {
        this.$emit('input', newVal);
    }



    get totalCount() {
        return this.$store.state.flowScheme.totalCount;
    }

    get items() {
        return this.$store.state.flowScheme.list;
    }



    dblClick() {
        this.$emit('on-dblclick');
    }


    async init() {
        await this.getPage({
            sorting: '',
            filter: '',
            maxResultCount: this.pageSize,
            skipCount: 0,
            connectId: 0,
            startTime: '1900-01-01 00:00:00',
            endTime: '2099-12-31 23:59:59',
        });
    }

    async getPage(args) {
        await this.$store.dispatch({
            type: 'flowScheme/obtainFlowSchemes',
            data: args,
        });
    }

    display(row: any) {
        this.flowSchemeModalData = {flowScheme: row, type: 'insert'};
        this.flowSchemeModalMount = true;
        this.$nextTick(() => {
            this.flowSchemeModalShow = true;
        });
    }



    async created() {
        await this.init();
    }

    mounted() {

    }

}
</script>

<style lang="less" scoped>

</style>
